@for $i from 1 through 50 {
  .mt#{$i*2} {
    margin-top: #{$i * 2}PX;
  }

  .mb#{$i*2} {
    margin-bottom: #{$i * 2}PX;
  }

  .mr#{$i*2} {
    margin-right: #{$i * 2}PX;
  }

  .ml#{$i*2} {
    margin-left: #{$i * 2}PX;
  }

  .m#{$i*2} {
    margin: #{$i * 2}PX;
  }

  .p#{$i*2} {
    padding: #{$i * 2}PX;
  }

  .pt#{$i*2} {
    padding-top: #{$i * 2}PX;
  }

  .pr#{$i*2} {
    padding-right: #{$i * 2}PX;
  }

  .pb#{$i*2} {
    padding-bottom: #{$i * 2}PX;
  }

  .pl#{$i*2} {
    padding-left: #{$i * 2}PX;
  }
}

@for $i from 0 through 20 {
  .f#{10 + $i*2} {
    font-size: #{10 + $i * 2}PX;
  }
}

.flt {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.flc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flb {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}
.frt {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.frc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.frb {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.fct {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.fcc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fcb {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.fcbt {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.fcbc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fcbb {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.fbt {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.fbc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fbb {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
.flex-4 {
  flex: 4;
}
.flex-5 {
  flex: 5;
}
.fv {
  flex-direction: column;
}
.fw {
  flex-wrap: wrap;
}
.flexs {
  align-items: stretch;
}
.cur {
  cursor: pointer;
}
.ell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.w1 {
  width: 100%;
}
.h1 {
  height: 100%;
}
.pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  overflow: auto;
  word-break: break-all;
  word-wrap: break-word;
}
